
define([ "Zepto", "underscore", "Backbone", "Handlebars",
		"text!templates/university/map.html",
        "views/common/menuview"
         ], function($, _, Backbone, Handlebars,
		template,  MenuView) {

	var MapPage = Backbone.View.extend({

		template : Handlebars.compile(template),

		  el: $('#map_canvas'),
          
	        
		  initialize: function() {
	  		  
			 // var latlng = new google.maps.LatLng(35.5, -100);
	   
			  this.myOptions = {
	       
					  zoom: 5,
					 // center: latlng,
					  mapTypeControl: false,
					  navigationControlOptions: {
						  style: google.maps.NavigationControlStyle.ANDROID
					  },
					  mapTypeId: google.maps.MapTypeId.ROADMAP,
					  streetViewControl: false,
					  styles: [{featureType:"administrative",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"landscape.natural",stylers:[{hue:"#0000ff"},{lightness:-84},{visibility:"off"}]},{featureType:"water",stylers:[{visibility:"on"},{saturation:-61},{lightness:-63}]},{featureType:"poi",stylers:[{visibility:"off"}]},{featureType:"road",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"landscape",stylers:[{visibility:"off"}]},{featureType:"administrative",stylers:[{visibility:"off"}]},{},{}]
		              
			  };

			     this.$el.height($(window).height() - $("header").height());
			     this.$el.width($(window).width() - $("header").width());
			     
		  },
	
	 render: function(eventName) {
		 this.$el.html(this.template(this.model.toJSON()));
		 
		 // menu top
		 this.menutop = new MenuView({
			 el : $('#menu', this.el),
			 model : this.model
		 });
		 this.menutop.render();
		 
		 
		 this.map = new google.maps.Map(document.getElementById('map_canvas'), this.myOptions);
		 var position = new google.maps.LatLng( model.get('latitudine') , model.get('longitudine')); 
		 var marker = new google.maps.Marker({                         
	            position: position,
	            map: this.map,
	            title: model.nome
	          });
         return this; 
	 }
		  
	});
	
	return MapPage;

});



/*
 var mapString;
var w = document.getElementById("mainwindow");
mapString = '<table width="1024" cellpadding="0" cellspacing="0"><tr>';
mapString += '<td> <div id="map_canvas" width="1024" height="350"></div></td>';
mapString += '</tr></table>';
w.innerHTML = mapString;

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



*/

